<template>
    <div class="appraise" ref="appraise">
        <div>
            <div class="scores" v-if="scores">
                <div class="left">
                    <div class="zonghe">
                        {{ Math.round(scores.overall_score) }}
                    </div>
                    <div style="font-size: 16px; color: #666;margin: 5px 0;">
                        综合评价
                    </div>
                    <div style="font-size: 13px; color: #b4b4b4;">
                        高于周边商家 {{ scores.compare_rating | getRating }}
                    </div>
                </div>
                <div class="right">
                    <div style="font-size: 15px; color: #666;">
                        服务态度：
                        <van-rate v-model="scores.service_score" :size="7" readonly color="#f60" void-icon="star"
                            void-color="#eee" />
                        <span style="font-size: 13px; margin-left: 5px; color: #f60;">{{ scores.service_score |
                                getoverall_score
                        }}</span>
                    </div>
                    <div style="font-size: 15px; color: #666;margin: 5px 0;">
                        菜品评价：
                        <van-rate v-model="scores.food_score" :size="7" readonly color="#f60" void-icon="star"
                            void-color="#eee" />
                        <span style="font-size: 13px; margin-left: 5px; color: #f60;">{{ scores.food_score |
                                getoverall_score
                        }}</span>
                    </div>
                    <div style="font-size: 14px; color: #666;">
                        送达时间：<span style="font-size: 13px; color: #b4b4b4;">{{ scores.deliver_time }} 分钟</span>
                    </div>
                </div>
            </div>






            <div class="list">
                <div class="tags">
                    <div v-for="(item, index) in tagList" :key="index">
                        <div :class="{ tag: true, unsatisfied: item.unsatisfied, active_tag: active == index }"
                            @click="changeTag(index, item.name)">
                            {{ item.name }}({{ item.count }})
                        </div>
                    </div>
                </div>
                
                <div class="ratings">
                    <div v-for="(item, index) in  list" :key="index" class="rating_item">
                        <div class="left">
                            <img :src="item.avatar | getImg" alt="">
                        </div>
                        <div class="center">
                            <div class="username">
                                {{ item.username }}
                            </div>
                            <div>
                                <van-rate v-model="item.rating_star" icon="star" void-icon="star-o" readonly size="10"
                                    color="#FF9A0D" />
                                <span class="time_spent_desc">{{ item.time_spent_desc }}</span>
                            </div>
                            <div>
                                <div class="item_foods">
                                    <div v-for="(value, i) in item.item_ratings" :key="i">
                                        <img :src="value.image_hash | getImg" alt="" class="foods_img"
                                            v-if="value.image_hash != ''">
                                    </div>

                                </div>
                                <div class="item_food_name">
                                    <div v-for="(value, i) in item.item_ratings" :key="i" class="food_name">
                                        {{ value.food_name }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="right">
                            {{ item.rated_at }}
                        </div>
                    </div>
                </div>
            </div>



            <div class="loading" v-show="loading">
                <van-loading size="20px">加载中...</van-loading>
            </div>



        </div>
    </div>
</template>
<script>
//引入关于下拉加载的插件
import BScroll from 'better-scroll';
//将评论类型 和 评论分类 进行一个引入
import { getScores,getTags, getratings } from '@/api/shop'
export default {
    data() {
        return {
            scores: null,
            //创建一个taglist 用来存放我们的tag类型数据
            tagList: [],
            //active用于特定选项的选择
            active: 0,
            // 表示当前评论的加载状态
            loading: false,
            //用于合并数据
            list: [],
            query: {
                tag_name: "",
                offset: 0,
                limit: 10
            },
            id: null,
            bscroll: null,


        }
    },
    async created() {
        let id = this.$route.query.id;
        this.id = id;
        let res = await getScores(id);
        this.scores = res.data;
        
        //请求评论类型的数据
        let tags = await getTags(id);
        this.tagList = tags.data;
        this.getList();

    },
    filters: {
        getRating(text) {

            text = text.toFixed(3)
            return text * 100 + "%"
        },
        getoverall_score(text) {
            return text.toFixed(1)
        },
        getImg(text) {
            if (text == '') {
                return '//elm.cangdu.org/img/default.jpg'
            } else {
                let str1 = text.substr(0, 1);
                let str2 = text.substr(1, 2)
                let houzui = text.substr(text.length - 4)
                let content = text.substr(3)
                if (houzui != 'jpeg') {
                    houzui = text.substr(text.length - 3)
                }
                return 'https://fuss10.elemecdn.com/' + str1 + "/" + str2 + "/" + content + "." + houzui
            }
        }
    },
    mounted() {
        this.initBscroll()
    },

    methods: {
        initBscroll() {
            // 创建better-scroll 实例
            this.bscroll = new BScroll(this.$refs.appraise, {
                pullUpLoad: true,
                click:true
            })
            //监听上拉加载时间
            this.bscroll.on('pullingUp', this.pullingUpHandler)
        },
        changeTag(index, name) {
            this.active = index;
            this.query.tag_name = name;
            this.query.offset = 0
            this.list = [];
            // 发送请求
            this.getList();
        },
        pullingUpHandler(){
            this.query.offset += 10;
            this.getList();
        },
        // 获取评论列表
        async getList() {

            // 判断当前是否为加载状态如为加载状态则禁止请求
            if (this.loading) {
                return
            }
            this.loading = true;
            let res = await getratings(this.id, this.query);
            // 将 新数据和老数据合并到同一个数组中·
            
            this.list = [...this.list, ...res.data];
            this.loading = false;
            // 完成加载
             this.bscroll.finishPullUp()
            //  重新计算 BetterScroll，当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常。
            this.bscroll.refresh()
       
        }
    }
}
</script>
<style lang="less" scoped>
.appraise {
    width: 100%;
    height: calc(100vh - 170px);
    background: #f1f1f1;
    overflow: hidden;

    .scores {
        width: 100%;
        padding: 10px;
        display: flex;
        background: #fff;

        .left {
            width: 50%;
            text-align: center;

            .zonghe {
                font-size: 25px;
                color: #f60;
            }
        }

        .right {
            width: 50%;
        }
    }

    .list {
        background: #fff;
        margin-top: 10px;

        .tags {
            display: flex;
            flex-wrap: wrap;
            padding: 10px;
            border-bottom: 1px solid #f1f1f1;

            .tag {

                font-size: 13px;
                padding: 7px;
                border-radius: 4px;
                background: #ebf5ff;
                color: #6d7885;
                margin-top: 5px;
                margin-right: 10px;
            }

            .unsatisfied {
                background: #f5f5f5;
                color: #aaa;
            }

            .active_tag {
                background: #3190e8;
                color: #fff;
            }

        }

        .ratings {
            width: 100%;
            padding: 20px 10px;
            padding-top: 10px;

            .rating_item {
                width: 100%;
                display: flex;
                justify-content: space-between;
                padding: 15px 0;
                border-bottom: 1px solid #f1f1f1;

                .left {
                    width: 15%;
                    text-align: center;

                    img {
                        width: 35px;
                        height: 35px;
                        border-radius: 50%;
                        display: block;
                        margin: 0 auto;
                    }
                }

                .center {
                    width: 65%;

                    .item_foods {
                        margin: 5px 0;
                        display: flex;
                    }

                    .foods_img {
                        width: 70px;
                        margin-right: 10px;
                    }

                    .item_food_name {
                        display: flex;

                        .food_name {
                            margin-right: 5px;
                            width: 60px;
                            padding: 5px;
                            border-radius: 3px;
                            border: 1px solid #e4e4e4;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            font-size: 13px;
                            color: #b4b4b4;
                        }
                    }

                    .username {
                        font-size: 14px;
                        color: #666;
                        margin-bottom: 5px;
                    }

                    .time_spent_desc {
                        font-size: 14px;
                        color: #666;
                        margin-left: 5px;
                    }
                }

                .right {
                    width: 20%;
                    text-align: center;
                    font-size: 13px;
                    color: #b4b4b4;
                }
            }
        }
    }

    .loading {
        width: 100%;
        padding: 10px;
        text-align: center;
        background: #fff;
    }
}
</style>